<template>
	<view class="page-content">
		<view class="bg_fff mt-10">
			<u--form labelPosition="left" labelWidth="190rpx" :labelStyle="{
		paddingLeft:'20rpx',
		color: '#333333'
		}" v-if="subData.type==2">
				<u-form-item label="收款手机号" prop="subData.phone">
					<u--input v-model="subData.phone" border="none" placeholder="请输入收款手机号"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="支付宝昵称" prop="subData.account">
					<u--input v-model="subData.account" border="none" placeholder="请输入支付宝昵称"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="实名姓名" prop="subData.name">
					<u--input v-model="subData.name" border="none" placeholder="请输入实名姓名"></u--input>
				</u-form-item>
			</u--form>

			<u--form labelPosition="left" labelWidth="190rpx" :labelStyle="{
		paddingLeft:'20rpx',
		color: '#333333'
		}" v-if="subData.type==1">
				<u-form-item label="收款手机号" prop="subData.phone">
					<u--input v-model="subData.phone" border="none" placeholder="请输入收款手机号"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="微信昵称" prop="subData.account">
					<u--input v-model="subData.account" border="none" placeholder="请输入微信昵称"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="实名姓名" prop="subData.name">
					<u--input v-model="subData.name" border="none" placeholder="请输入实名姓名"></u--input>
				</u-form-item>
			</u--form>

			<u--form labelPosition="left" labelWidth="190rpx" :labelStyle="{
		paddingLeft:'20rpx',
		color: '#333333'
		}" v-if="subData.type==3">
				<u-form-item label="银行卡号" prop="subData.account">
					<u--input v-model="subData.account" border="none" placeholder="请输入银行卡号"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="开户行" prop="subData.bank">
					<uni-data-picker :localdata="banks" :map="{text:'name',value:'wseq'}" popup-title="开户行"
						placeholder="请选择开户行" v-model="subData.bank"></uni-data-picker>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="开户人姓名" prop="subData.name">
					<u--input v-model="subData.name" border="none" placeholder="请输入开户人姓名"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="身份证号" prop="subData.idcard">
					<u--input v-model="subData.idcard" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>
				<u-divider :customStyle="{margin:'0px 20rpx'}"></u-divider>
				<u-form-item label="手机号" prop="subData.phone">
					<u--input v-model="subData.phone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view v-if="subData.type==3" class="bg_fff mt-10">
			<u--form labelPosition="left" labelWidth="190rpx" :labelStyle="{
			paddingLeft:'20rpx',
			color: '#333333'
			}">
				<u-form-item label="开户人标签" prop="subData.account">
					<view class="display_row_center c_C62B2C flagbox"
						style="align-items:center;justify-content: flex-start;">
						<text :class="{active:subData.bank_flag==1}" @click="flagClick(1)">本人卡</text>
						<text class="ml-10" :class="{active:subData.bank_flag==2}" @click="flagClick(2)">代收款人卡</text>
					</view>
				</u-form-item>
			</u--form>
		</view>

		<view class="btmBox c_ffffff" @click="addAccount">
			提交
		</view>
	</view>
</template>

<script>
	import {
		getBanks,
		postPayAccount,
		getCashAccountDetail
	} from '@/config/api.js'

	export default {
		data() {
			return {
				subData: {
					id: "",
					type: 1,
					account: "",
					phone: "",
					name: "",
					bank: "",
					idcard: "",
					bank_flag: 1
				},
				banks: []
			}
		},
		onLoad(op) {
			this.subData.type = op.type;
			if (op.id != undefined && op.id != null && op.id != "") {
				this.subData.id = op.id;
				this.getDetail();
			} else {
				delete this.subData['id'];
			}

			if (op.type == 3)
				this.getBases();
		},
		methods: {
			getDetail() {
				getCashAccountDetail({
					id: this.subData.id
				}).then(res => {
					this.subData = res;
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			addAccount() {
				postPayAccount(this.subData).then(res => {
					uni.showToast({
						title: "操作成功！",
						duration: 2000,
						icon: 'success'
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			flagClick(flag) {
				this.subData.bank_flag = flag;
			},
			getBases() {
				getBanks().then(res => {
					this.banks = res;
				})
			}
		}
	}
</script>

<style scoped>
	.btmBox {
		background: linear-gradient(to bottom, #C62B2C, #FF7C71);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		box-sizing: border-box;
		margin-left: 5%;
		width: 90%;
		position: fixed;
		bottom: 20rpx;
	}

	.flagbox>text {
		border: 1px solid #C62B2C;
		border-radius: 6rpx;
		padding: 8rpx 20rpx;
	}

	.flagbox>text.active {
		color: #fff;
		background-color: #C62B2C;
	}

	/deep/ .selected-area.placeholder {
		color: #c0c4cc !important;
		font-size: 15px !important;
		text-align: right;
	}

	/deep/ .input-value.input-value-border {
		height: 24px !important;
		padding: 0px !important;
		border: none;
	}
</style>
